<template>
  <div class="dataSearch">
    <el-tabs>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-message"></i> 数据看板</span>
        <kanban ref="kanban"/>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i>新建任务</span>
        <AddTask />
      </el-tab-pane>
    </el-tabs>
    <input type="file" class="lead lead-file" accept=".json" @change="getFile">
    <el-button class="lead" type="primary" size="mini">导入</el-button>
  </div>
</template>

<script>
import AddTask from "./AddTask.vue";
import kanban from "./kanban";
import {WebSiteTaskPost} from '../../api/api'
export default {
  name: "task",
  components: {
    kanban,
    AddTask,
  },
  methods:{
      getUUID () {
          const s = [];
          const hexDigits = '0123456789abcdefghijklmnopqrstuvwxyz';
          for (let i = 0; i < 12; i++) {
              s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
          }
          const uuid = s.join('');
          return uuid
      },
      getFile(e) {
          const that=this;
          let files = e.target.files;//获取到文件列表
          if (files.length !== 0) {
              let reader = new FileReader();//新建一个FileReader
              reader.readAsText(files[0], "UTF-8");//读取文件
              reader.onload = function (evt) { //读取完文件之后会回来这里
                  let fileString = JSON.parse(evt.target.result); // 读取文件内容
                  fileString.idWebSiteTask=that.getUUID();
                  WebSiteTaskPost(fileString).then(()=>{
                      that.$refs.kanban.getData()
                  })
              }
          }
      }
  }
};
</script>

<style scoped lang="scss">
.dataSearch {
  margin: 0 50px 60px;
  background: #fff;
  padding: 0 24px;
  position: relative;
  .lead{
    position: absolute;
    top: 5px;
    right: 20px;
  }
  .lead-file{
    z-index: 999;
    width: 56px;
    height: 28px;
    opacity: 0;
    cursor: pointer;
  }
  ::v-deep {
    .el-tabs {
      border: none;
      box-shadow: none;
    }
    .el-tabs--border-card > .el-tabs__header {
      background: none;
    }
    .el-tabs__content {
      min-height: calc(100vh - 211px);
    }
    .el-tabs__header {
      margin-bottom: 0;
    }
  }
}
</style>